<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>流程人员变更管理</title>
	<meta name="decorator" content="ani"/>
	<script type="text/javascript">

		$(document).ready(function() {
		});

		function save() {
            var isValidate = jp.validateForm('#inputForm');//校验表单
            if(!isValidate){
                return false;
			}else{
                jp.loading();
                jp.post("${ctx}/actuserchange/actUserChange/save",$('#inputForm').serialize(),function(data){
                    if(data.success){
                        jp.getParent().refresh();
                        var dialogIndex = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                        parent.layer.close(dialogIndex);
                        jp.success(data.msg)

                    }else{
                        jp.error(data.msg);
                    }
                })
			}

        }
		function addRow(list, idx, tpl, row){
			$(list).append(Mustache.render(tpl, {
				idx: idx, delBtn: true, row: row
			}));
			$(list+idx).find("select").each(function(){
				$(this).val($(this).attr("data-value"));
			});
			$(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
				var ss = $(this).attr("data-value").split(',');
				for (var i=0; i<ss.length; i++){
					if($(this).val() == ss[i]){
						$(this).attr("checked","checked");
					}
				}
			});
			$(list+idx).find(".form_datetime").each(function(){
				 $(this).datetimepicker({
					 format: "YYYY-MM-DD HH:mm:ss"
			    });
			});
		}
		function delRow(obj, prefix){
			var id = $(prefix+"_id");
			var delFlag = $(prefix+"_delFlag");
			if (id.val() == ""){
				$(obj).parent().parent().remove();
			}else if(delFlag.val() == "0"){
				delFlag.val("1");
				$(obj).html("&divide;").attr("title", "撤销删除");
				$(obj).parent().parent().addClass("error");
			}else if(delFlag.val() == "1"){
				delFlag.val("0");
				$(obj).html("&times;").attr("title", "删除");
				$(obj).parent().parent().removeClass("error");
			}
		}


		function selectRow() {
			var userold = $("#useroldId").val();
			if(userold != '' && userold != undefined){
				top.layer.open({
					type: 2,
					shade:0,
					area: ['1000px', '800px'],
					title:"选择",
					auto:true,
					maxmin: true, //开启最大化最小化按钮
					content: "${ctx}/actuserchange/actUserChange/outSelect?userold="+userold,
					btn: ['确定', '关闭'],
					yes: function(index, layero){
						var ids = layero.find("iframe")[0].contentWindow.getIdSelections();
						var data = layero.find("iframe")[0].contentWindow.getSelections();
						if(ids.length ==0){
							jp.warning("请选择至少一个数据!");
							return;
						}
						// 执行保存
						if(data.length>0){
							for(var i = 0; i<data.length; i++){
								addRow('#actUserChangeEntryList', actUserChangeEntryRowIdx, actUserChangeEntryTpl, data[i]);
								actUserChangeEntryRowIdx = actUserChangeEntryRowIdx + 1;
								$("#actUserChangeEntryList" + i + "_xh").val(i+1);
							}
						}
						layero.find("iframe")[0].contentWindow.refresh();
						jp.ckChangeRow("actUserChangeEntryList");
						/*关闭页面*/
						top.layer.close(index);
					},
					cancel: function(index){
						top.layer.close(index);
					}
				});
			}else {
				jp.error("请选择原操作人");
			}

		}
	</script>
</head>
<body class="bg-white">
	<form:form id="inputForm" modelAttribute="actUserChange" action="${ctx}/actuserchange/actUserChange/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<fieldset>
			<legend><i style="padding: 0px 5px 0px 5px" class="fa fa-hand-o-right" aria-hidden="true"></i>基本信息</legend>
			<div class="form-group">
				<label class="col-sm-2 col-md-1 control-label"><font color="red">原操作人：</font></label>
				<div class="col-sm-10 col-md-5">
						<sys:userselect id="userold" name="userold" value="${actUserChange.userold}" labelName="" labelValue="${actUserChange.userold}"
										cssClass="form-control "/>
				</div>
				<label class="col-sm-2 col-md-1 control-label"><font color="red">更正操作人：</font></label>
				<div class="col-sm-10 col-md-5">
					<sys:userselect id="usernew" name="usernew" value="${actUserChange.usernew}" labelName="" labelValue="${actUserChange.usernew}"
									cssClass="form-control "/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 col-md-1 control-label">更正原因：</label>
				<div class="col-sm-10 col-md-11">
					<form:textarea path="memo" htmlEscape="false" rows="4"    class="form-control "/>
				</div>
			</div>
		</fieldset>
		<div class="tabs-container">
            <ul class="nav nav-tabs">
				<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">变更明细：</a>
                </li>
            </ul>
            <div class="tab-content">
				<div id="tab-1" class="tab-pane fade in  active">
					<a class="btn btn-white btn-sm" onclick="selectRow()" title="数据选择"><i class="fa fa-plus"></i> 数据选择</a>
					<table class="table table-striped table-bordered table-condensed">
						<thead>
							<tr>
								<th class="hide"></th>
								<th style="min-width:500px">流程名称</th>
								<th style="min-width:100px">流程节点</th>
								<th width="10">&nbsp;</th>
							</tr>
						</thead>
						<tbody id="actUserChangeEntryList">
						</tbody>
					</table>
					<script type="text/template" id="actUserChangeEntryTpl">//<!--
						<tr id="actUserChangeEntryList{{idx}}">
							<td class="hide">
								<input id="actUserChangeEntryList{{idx}}_id" name="actUserChangeEntryList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
								<input id="actUserChangeEntryList{{idx}}_delFlag" name="actUserChangeEntryList[{{idx}}].delFlag" type="hidden" value="0"/>
							   <input id="actUserChangeEntryList{{idx}}_act" name="actUserChangeEntryList[{{idx}}].act" type="text" value="{{row.act}}"    class="form-control "/>
							</td>
							<td style="min-width:500px">
								<input id="actUserChangeEntryList{{idx}}_actname" readonly="true" name="actUserChangeEntryList[{{idx}}].actname" type="text" value="{{row.actname}}"    class="form-control "/>
							</td>
							<td style="min-width:100px">
								<input id="actUserChangeEntryList{{idx}}_node" readonly="true" name="actUserChangeEntryList[{{idx}}].node" type="text" value="{{row.node}}"    class="form-control "/>
							</td>

							<td class="text-center" width="10">
								{{#delBtn}}<span class="close" onclick="delRow(this, '#actUserChangeEntryList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
							</td>
						</tr>//-->
					</script>
					<script type="text/javascript">
						var actUserChangeEntryRowIdx = 0, actUserChangeEntryTpl = $("#actUserChangeEntryTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
						$(document).ready(function() {
							var data = ${fns:toJson(actUserChange.actUserChangeEntryList)};
							for (var i=0; i<data.length; i++){
								addRow('#actUserChangeEntryList', actUserChangeEntryRowIdx, actUserChangeEntryTpl, data[i]);
								actUserChangeEntryRowIdx = actUserChangeEntryRowIdx + 1;
							}
						});
					</script>
				</div>
			</div>
		</div>
	</form:form>
</body>
</html>
